<template>
  <div class="goodlist-contain">
    <div class="box" v-for="item in goodsList" :key="item.id">
      <img :src="item.img_url" alt="" @click="goDetial(item.id)">
      <h1 class="title">{{item.zhaiyao}}</h1>
      <div class="price">
        <span class="newPrice">￥{{item.sell_price}}</span>
        <span class="oldPrice">￥{{item.market_price}}</span>
        <p>
          <span>热卖中</span>
          <span>剩余{{item.stock_quantity}}件</span>
        </p>
      </div>
    </div>
     <!-- 加载更多按钮 -->
    <mt-button type="danger" size="large" @click="getgoodsMore">加载更多</mt-button>
  </div>

 
</template>

<script>

export default {
  data(){
    return{
      pageindex:1,
      goodsList:[],
    }
  },
  created(){
    this.getgoodslist();
  },
  methods:{
    // 获取商品列表信息
    getgoodslist(){
      this.$http.get("http://www.liulongbin.top:3005/api/getgoods?pageindex="+this.pageindex).then(result=>{
        if(result.body.status===0){
          this.goodsList=this.goodsList.concat(result.body.message)
        }else{
          Toast("获取数据失败")
        }
      })
    },

    // 加载更多
    getgoodsMore(){
      this.pageindex+=1;
      this.getgoodslist();
    },

    // 使用编程式导航跳转页面
    goDetial(id){
      this.$router.push("/home/goodsinfo/"+id)
    }
  },
}
</script>

<style lang="scss" scoped>
  .goodlist-contain{
    display: flex;
    // flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding:8px;
    .box{
      width: 49%;
      border: 1px solid #eee;
      box-shadow: 0 0 8px #eee;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      img{
        width: 100%;
      }
      h1{
        font-size: 14px;
      }
      .price{
        padding: 5px;
        background: #eee;
        .newPrice{
          font-size: 18px;
          color: red;
        }
        .oldPrice{
          text-decoration: line-through;
          font-size: 12px;
          margin-left: 8px;
        }
      }

      p{
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        margin: 0px;
        padding: 8px 5px;
      }
    }
    
  }
</style>
